<template>
  <div :id="chartId" :style="[{ 'width': '100%;', 'height': height + 'px' }]"></div>
</template>
<script>
import resize from './mixins/resize.js'
let chart = null
export default {
  mixins: [resize],
  name: 'Ebar',
  props: {
    height: {
      type: Number,
      default: 300
    },
    option: {
      type: Object,
      default: function() {
        return {}
      }
    },
  },
  data() {
    return {
    }
  },
  computed: {
    chartId: function() {
      return 'Ebar-' + Math.random().toString(36).substr(2)
    }
  },

  watch: {
    option: {
      deep: true,
      handler(newVal, oldVal) {
        if (!this.charts) {
          this.initEcharts(chart)
        }
        this.charts.clear()
        if (newVal) {
          this.HandlerSetOption(this.charts, newVal)
        } else {
          if (oldVal) {
            this.HandlerSetOption(this.charts, oldVal)
          } else {
            this.HandlerSetOption(this.charts)
          }
        }
      }
    },
    chartData: {
      deep: true,
      handler(val) {
      }
    }
  },

  created() {

    this.$nextTick(() => {
      this.initEcharts(chart)
    })
  },
  beforeUnmount() {
  },
  methods: {
    // 设置默认的option
    HandlerSetOption(chart, option) {
      let _option
      if (option) {
        _option = option
      } else {
       _option = {
         dataset: {
           source: [
             ['score', 'amount', 'product'],
             [0, 0, ''],
             [0, 0, ''],
             [0, 0, ''],
           ]
         },
         xAxis: {
           name: 'amount',
           splitLine: {
             show: false
           },
           boundaryGap: false,
           axisTick: {
             show: false
           },
           axisLabel: {
             show: true
           },
           axisLine: {
             show: false,
             lineStyle: {
               color: '#aaa'
             }
           },
           splitArea: {
             show: false
           }
         },
         grid: {
           left: 25,
           right: 10,
           bottom: 20,
           top: 50,
           containLabel: true
         },
         yAxis: {
           type: 'category',
           axisLabel: {
             show: true,
             color: '#616266' // 更改坐标轴文字颜色
           },
           axisLine: {
             show: true,
             lineStyle: {
               color: '#aaa'
             }
           }
         },
         visualMap: {
           show: false,
           orient: 'horizontal',
           left: 'center',
           min: 10,
           max: 100,
           text: ['High Score', 'Low Score'],
           // Map the score column to color
           dimension: 0,
           inRange: {
            //  color: ['#65B581', '#FFCE34', '#FD665F']
            color: ['#00CBED', '#FFB200', '#0087FA']
           }

         },
         series: [
          {
             type: 'bar',
             encode: {
               x: 'amount',
               y: 'product'
             }
             // label: {
             //   show: true,
             //   position: 'inside',
             //   // formatter: (prams) => {
             //   //   return this.insideFormatter(prams)
             //   // }
             // }
          }
         ]
       }
      }
      chart.setOption(_option, true)
    },
    // 初始化echarts实例
    initEcharts(chart) {
      if (chart) {
        chart.dispose()
        chart = null
      }
      chart = echarts.init(this.$el)
      this.charts = chart
      chart.clear()
      this.charts = chart
      if (!this.option || !this.option.series) {
        this.HandlerSetOption(chart)
      } else {
        this.HandlerSetOption(chart, this.option)
      }
    }

  }
}
</script>
